<template>
  <div class="goods">
    <div class="mb-10">
      <el-button type="success" @click="add()" class="mr-4">新增</el-button>
      <el-input
        v-model="filtrate.keyword"
        style="width: 240px"
        placeholder="请输入名字"
        clearable
        class="mr-2"
      />
      <el-button type="primary" :icon="Search" @click="search()"
        >查询</el-button
      >
    </div>
    <!-- detail_img detail_video -->
    <div>
      <el-table :data="goodsList" border style="width: 100%" height="700">
        <el-table-column type="index" label="序号" width="70" />
        <el-table-column label="ID" width="70" prop="id" />
        <el-table-column label="分类ID" width="70" prop="tid" />
        <el-table-column label="名字" width="200" prop="name" />
        <el-table-column label="备注" width="200" prop="goods_describe" />
        <el-table-column label="地址" width="200" prop="delivery_address" />
        <el-table-column label="手机号" width="200" prop="phone" />
        <el-table-column label="多图预览" width="120">
          <template #default="{ row }">
            <el-image
              style="width: 100%; height: 100px"
              :src="row.detail_img[0]"
              :preview-src-list="row.detail_img"
              :z-index="99999"
            />
          </template>
        </el-table-column>
        <el-table-column label="视频" width="400">
          <template #default="{ row }">
            <div class="flex">
              <video
                style="width: 100px; height: 100px"
                v-for="item in row.detail_video"
                :key="item"
                :src="item"
                @click="play(item)"
              ></video>
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="80">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="edit(row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="mt-4 flex justify-center items-center">
        <el-pagination
          style="margin: 0 auto"
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="filtrate.page"
          :page-size="filtrate.limit"
          @current-change="handlePage"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog v-model="isShow" width="640">
      <div class="flex justify-center items-center">
        <vue3VideoPlay v-bind="options" />
      </div>
    </el-dialog>
    <el-dialog v-model="editShow" width="80%" :title="type ? '编辑' : '新增'">
      <div>
        <el-form :model="row" label-width="auto" ref="ruleFormRef">
          <el-row :gutter="10">
            <el-col :span="24">
              <el-form-item label="分类ID" prop="tid" required>
                <el-select v-model="row.tid" filterable>
                  <el-option
                    v-for="item in themeList"
                    :key="item"
                    :label="item.text"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="门店" prop="uid" required>
                <el-select v-model="row.uid" filterable>
                  <el-option
                    v-for="item in userList"
                    :key="item"
                    :label="item.ext_field2"
                    :value="item.user_id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="名字" prop="name" required>
                <el-input v-model="row.name" />
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="地址" prop="delivery_address" required>
                <el-input v-model="row.delivery_address" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="手机号" prop="phone" required>
                <el-input v-model="row.phone" maxlength="11" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="图片" prop="detail_img" required>
                <gall-uploads v-model="row.detail_img"></gall-uploads>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="视频" prop="detail_video" required>
                <gall-up-video
                  v-model="row.detail_video"
                  :videoImg="nodata"
                ></gall-up-video>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注" prop="goods_describe" required>
                <el-input v-model="row.goods_describe" type="textarea" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="confirm(ruleFormRef)">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import goods from "@/api/goods.js";
import theme from "@/api/theme.js";
import user from "@/api/user.js";
import GallUploads from "@/components/GallUploads/index.vue";
import GallUpVideo from "@/components/GallUpVideo/index.vue";
import { Search } from "@element-plus/icons-vue";
import nodata from "@/assets/download.jpg";
import { reactive, ref, onMounted } from "vue";
const goodsList = ref([]);
const themeList = ref([]);
const userList = ref([]);
const filtrate = reactive({
  page: 1,
  limit: 10,
  keyword: "",
});
const total = ref(0);
const isShow = ref(false);
const editShow = ref(false);
const row = ref({});
const ruleFormRef = ref(null);
const type = ref(false);
const options = reactive({
  width: "600px", //播放器高度
  height: "450px", //播放器高度
  color: "#409eff", //主题色
  title: "", //视频名称
  src: "", //视频源
  muted: false, //静音
  webFullScreen: false,
  speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
  autoPlay: false, //自动播放
  loop: false, //循环播放
  mirror: false, //镜像画面
  ligthOff: false, //关灯模式
  volume: 0.3, //默认音量大小
  control: true, //是否显示控制
  controlBtns: [
    "audioTrack",
    "quality",
    "speedRate",
    "volume",
    "setting",
    "pip",
    "pageFullScreen",
    "fullScreen",
  ], //显示所有按钮,
});
const loadGoodsData = async () => {
  const res = await goods.goodsData(filtrate);
  // res.goodsList.detail_img = res.goodsList.detail_img.split(",");
  goodsList.value = res.goodsList.map((item) => {
    return {
      ...item,
      detail_img: item.detail_img.split(",").filter(Boolean),
      detail_video: item.detail_video.split(",").filter(Boolean),
    };
  });
  total.value = res.total;
};
const themeAll = async () => {
  const res = await theme.themeAll();
  themeList.value = res.themeList;
};
const loadUserData = async () => {
  const res = await user.userData();
  userList.value = res.userList;
  console.log(userList.value);
};
const handlePage = (pno) => {
  filtrate.page = pno;
  loadGoodsData();
};
const search = () => {
  filtrate.page = 1;
  loadGoodsData();
};
const play = (url) => {
  options.src = url;
  isShow.value = true;
};
const edit = (e) => {
  row.value = { ...e };
  row.value.detail_img = row.value.detail_img.map((item) => {
    return { url: item };
  });
  row.value.detail_video = row.value.detail_video.map((item) => {
    return {
      url: nodata,
      path: item,
    };
  });
  editShow.value = true;
  type.value = true;
};
const add = () => {
  row.value = {};
  editShow.value = true;
  type.value = false;
};
const confirm = async (formEl) => {
  console.log("=========>");
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      if (!/^1[3-9]\d{9}$/.test(row.value.phone)) {
        return ElMessage({
          type: "error",
          message: "手机格式错误",
        });
      }
      const rowData = { ...row.value };
      rowData.detail_img = rowData.detail_img.map((item) => item.url).join(",");
      rowData.detail_video = rowData.detail_video
        .map((item) => item.path)
        .join(",");
      if (type.value) {
        await goods.update(rowData);
      } else {
        await goods.create(rowData);
      }
      editShow.value = false;
      loadGoodsData();
    }
  });
};
onMounted(() => {
  loadGoodsData();
  themeAll();
  loadUserData();
});
</script>

<style scoped lang="scss">
::v-deep .el-table .el-table__cell {
  position: unset;
}
</style>
